<template>
  <div>
    <el-dialog
      :title="$t('LineManagementLang.configureApp')"
      :visible.sync="Visible"
      width="650px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <MyTable
        ref="LineManagement_serviceFee"
        :gridOptions="{checkboxConfig:{checkField: 'checked', trigger: 'row', highlight: true}}"
        :tableColumn="tableColumn"
        :tableData="tableData"
        :isOrder="false"
        @sendCheckBoxList="setCheckBox"
        >
          <template v-slot:content="scope">
            <span>{{ scope.row[scope.config.prop] }}</span>
          </template>
        </MyTable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="confirm" size="small">{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
  },
  data() {
    return {
      Visible: false,
      lid:'',
      tableColumn:[
        {
          label: "",
          prop: "table_code",
          width: 40,
        },
        {
          type: 'checkbox',
          width: 40,
        },
        {
          checked: true,
          label: this.$t('AppConfigurationLang.name'),
          prop: "name",
          width: 120,
          order:"",
        },
        {
          checked: true,
          label: this.$t('AppConfigurationLang.package_name'),
          prop: "package",
          width: 300,
          order:"",
        },
      ],
      tableData:[],
      sendDataArr:[],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
    init(data) {
      this.Visible = true;
      this.lid=data.lid
      this.getData();
    },
    //获取单条
    getData() {
      this.$get("getLineApp",{lid:this.lid}).then((res) => {
        let sureSelectArr=res.data
        this.$get("getAppList").then((res) => {
        this.tableData = res.data;
        if(this.tableData.length>0){
          this.tableData.forEach(item=>{
            if(sureSelectArr.findIndex(el=>{return el.app_id==item.id})!==-1){
                this.$refs.LineManagement_serviceFee.$refs.tableRef.setCheckboxRow(item,true);
            }
          })
          this.sendDataArr=this.tableData.filter(item=>{return item.checked})
        }
      });
      });
      
    },
    // 多选框勾选集合
    setCheckBox(data){
      this.sendDataArr=data
    },
    // 提交
    confirm() {
      let type = true;
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        let params = new FormData();
        let app_ids = this.sendDataArr.map((obj) => {return '' + obj.id;}).join(',');
        params.append("lid", this.lid);
        params.append("app_ids", app_ids);
        this.$postForm("saveLineApp", params).then((res) => {
          this.confirmTrue = true;
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    //取消修改
    cancel() {
      this.tableData=[]
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  /deep/ .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
    color:#409eff;
  }
</style>